<template>
  <div class="dataContainer">
    <!-- Search start -->
    <el-form :inline="true" size="small" :model="queryParams" class="demo-form-inline searchContainer">
      <el-form-item label="练习账号: ">
          <!-- <el-input v-model="queryParams.studentID" placeholder="请选择学员"  @keyup.enter="onSearch"  style="width: 180px;"/> -->
          <el-select
            filterable
            v-model="queryParams.studentID"
            placeholder="请选择练习账号" 
            style="width: 180px;"
            clearable
          >
            <el-option
              v-for="item in studentList"
              :key="item.id"
              :label="item.code+'-'+item.wechatNickname+'-'+item.phone"
              :value="item.id"
            >
                <div>
                 <div style="display: inline-block;width: 200px;">
                  <span title="学员编号">{{ item.code }}</span>
                  <span title="微信昵称" style="float:right;color:#c7c7c7;margin-right: 5px;">{{ item.wechatNickname }}</span>
                 </div>
                 <span title="手机号码" style="display: inline-block;color: var(--el-color-primary);width: 90px;">{{ item.phone }}</span>
                </div>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发生日期: ">
            <el-date-picker
                style="width: 180px;"
                v-model="queryParams.occurrenceDate"
                type="date"
                placeholder="请选择发生日期"
                size="small"
                value-format="YYYY-MM-DD"
            />
        </el-form-item>
      <el-form-item>
        <el-button class="bs-form-btn" size="small" type="primary" @click="onSearch" ><el-icon><Search /></el-icon>查 询</el-button>
        <ResetButton :queryParams="queryParams"/>
      </el-form-item>
    </el-form>
    <!-- Search end -->

    <!-- Table start -->
    <div >
      <ColumnSetting v-model:columnList="columnList" />
      <el-table
        ref="tableRef"
        v-loading="tableLoading"
        :border="true"
        class="bs-table"
        :data="tableData"
        row-key="id"
        :height="tableHeight"
        :header-cell-style="{textAlign: 'center'}"
        :cell-style="{textAlign: 'center'}"
      >
        <el-table-column type="index" label="序号" width="80" fixed/>
        <template v-for="item in columnList" :key="item.prop">
          <el-table-column :prop="item.prop" :label="item.label"  :fixed="item.fixed" :sortable:="item.sortable" v-if="!item.hide && item.prop!='action'" :width="item.width">
            <template #default="scope">
              <template v-if="item.prop=='status'">
                <div v-if="scope.row.status==1">
                    <el-tag type="primary">正常</el-tag>
                </div>
                <div v-else>  
                    <el-tag type="info">禁用</el-tag>
                </div>
              </template>
              <template v-else-if="item.prop=='password'">
                <el-tooltip
                  v-if="isNotBlank(scope.row.password)"
                  class="box-item"
                  effect="dark"
                  :content="scope.row.password"
                  placement="bottom-start"
                  :teleported="true"
                >
                  <span>******</span>
                </el-tooltip>
              </template>
              <template v-else-if="item.prop=='loginPassword'">
                <el-tooltip
                  v-if="isNotBlank(scope.row.loginPassword)"
                  class="box-item"
                  effect="dark"
                  :content="scope.row.loginPassword"
                  placement="bottom-start"
                  :teleported="true"
                >
                  <span>******</span>
                </el-tooltip>
              </template>
              <template v-else>
                {{ scope.row[item.prop] }}
              </template>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" :width="item.width" v-else-if="!item.hide && item.prop=='action'">
             <template #default="scope">
              <el-button  size="small" link type="success"  @click="detailRow(scope.row.id)" ><el-icon><View /></el-icon> 详情</el-button>
            </template>
          </el-table-column>
        </template>
      </el-table>
      <pagination
        v-model:page="queryParams.pageNo"
        v-model:limit="queryParams.pageSize"
        small="small"
        disabled="disabled"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableTotal"
        @pagination="selectByPage"
      />
    </div>
    <el-dialog
      v-model="dialogVisible"
      title="资金状况详情"
      width="55%"
    >
      <div class="capitalDetail" style="text-align: left;">
        <table class="capitalDetailTable">
          <tbody>
            <tr>
              <td colspan="4" style="text-align: center;">资金状况</td>
            </tr>
            <tr>
              <td>上日结存</td>
              <td class="priceTD">{{ rowData.previousDayBalance }}</td>
              <td>客户权益</td>
              <td class="priceTD">{{ rowData.clientEquity }}</td>
            </tr>
            <tr>
              <td>当日存取合计</td>
              <td class="priceTD">{{ rowData.dailyTotalDepositAndWithdrawal }}</td>
              <td>实有货币资金</td>
              <td class="priceTD">{{ rowData.actualMonetaryFunds }}</td>
            </tr>
            <tr>
              <td>平仓盈亏</td>
              <td class="priceTD">{{ rowData.profitLoss }}</td>
              <td>非货币充抵金额</td>
              <td class="priceTD">{{ rowData.nonCashMarginValue }}</td>
            </tr>
            <tr>
              <td>当日总权利金</td>
              <td class="priceTD">{{ rowData.dailyTotalPremium }}</td>
              <td>货币充抵金额</td>
              <td class="priceTD">{{ rowData.cashMarginValue }}</td>
            </tr>
            <tr>
              <td>当日手续费</td>
              <td class="priceTD">{{ rowData.dailyTotalCommission }}</td>
              <td>冻结资金</td>
              <td class="priceTD">{{ rowData.frozenFunds }}</td>
            </tr>
            <tr>
              <td>当日结存</td>
              <td class="priceTD">{{ rowData.dailyDayBalance }}</td>
              <td>保证金占用</td>
              <td class="priceTD">{{ rowData.marginOccupy }}</td>
            </tr>
            <tr>
              <td>浮动盈亏</td>
              <td class="priceTD">{{ rowData.floatingProfitLoss }}</td>
              <td>可用资金</td>
              <td class="priceTD">{{ rowData.availableAmount }}</td>
            </tr>
            <tr>
              <td ></td>
              <td class="priceTD"></td>
              <td>风险度</td>
              <td class="priceTD">{{ rowData.riskExposure }}</td>
            </tr>
            <tr>
              <td></td>
              <td class="priceTD"></td>
              <td>追加保证金</td>
              <td class="priceTD">{{ rowData.appendMargin }}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div style="margin-top: 20px;">
        <table class="inoutCapitalTable">
          <tbody>
            <tr>
              <td colspan="5" style="text-align: center;">出入金明细 ( 单位:人民币 ) </td>
            </tr>
            <tr>
              <td style="width: 25%;">发生日期</td>
              <td style="width: 20%;">入金</td>
              <td style="width: 20%;">出金</td>
              <td style="width: 10%;">方式</td>
              <td style="width: 25%;">摘要</td>
            </tr>
            <template v-if="rowData.list && rowData.list.length > 0">
              <tr v-for="(item,index) in rowData.list" :key="index">
                <td style="text-align: left;">{{ item.occurrenceDate }}</td>
                <td class="priceTD">{{ item.deposit }}</td>
                <td class="priceTD">{{ item.withdraw }}</td>
                <td style="text-align: left;">出入金</td>
                <td style="text-align: left;">{{ item.method }}</td>
              </tr>
              <tr>
                <td style="text-align: left;">合计</td>
                <td class="priceTD">{{ rowData.list.reduce((count,item)=>count+item.deposit,0) }}</td>
                <td class="priceTD">{{ rowData.list.reduce((count,item)=>count+item.withdraw,0) }}</td>
                <td></td>
                <td></td>
              </tr>
            </template>
          </tbody>
        </table>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { selectByPageOrgData, getById } from "@/api/oss/capitalSummary.js"
import { getAll } from '@/api/oss/student.js'
import { mapState } from 'vuex'
export default {
    components:{
    },
    data() {
        return {
            tableTotal: 0,
            tableLoading: false,
            tableData: [],
            // 查询参数
            queryParams: {
                pageNo: 1,
                pageSize: 500,
                account:'',
                occurrenceDate:'',
            },
            columnList:[
                {prop:'studentAccount',label:'练习账号',sortable:false,sort:1,hide:false,fixed:true,width:150},
                {prop:'previousDayBalance',label:'上日结存',sortable:false,sort:6,hide:false,fixed:false,width:150},
                {prop:'dailyTotalDepositAndWithdrawal',label:'当日存取合计',sortable:false,sort:7,hide:false,fixed:false,width:150},
                {prop:'profitLoss',label:'平仓盈亏',sortable:false,sort:1,hide:false,fixed:false,width:150},
                {prop:'dailyTotalPremium',label:'当日总权利金',sortable:false,sort:1,hide:false,fixed:false,width:150},
                {prop:'dailyTotalCommission',label:'当日手续费',sortable:false,sort:1,hide:false,fixed:false,width:150},
                {prop:'dailyDayBalance',label:'当日结存',sortable:false,sort:1,hide:false,fixed:false,width:150},
                {prop:'floatingProfitLoss',label:'浮动盈亏',sortable:false,sort:1,hide:false,fixed:false,width:150},
                {prop:'clientEquity',label:'客户权益',sortable:false,sort:1,hide:false,fixed:false,width:150},
                {prop:'actualMonetaryFunds',label:'实有货币资金',sortable:false,sort:1,hide:false,fixed:false,width:150},
                {prop:'nonCashMarginValue',label:'非货币充抵金额',sortable:false,sort:1,hide:false,fixed:false,width:150},
                {prop:'cashMarginValue',label:'货币充抵金额',sortable:false,sort:1,hide:false,fixed:false,width:150},
                {prop:'frozenFunds',label:'冻结资金',sortable:false,sort:1,hide:false,fixed:false,width:150},
                {prop:'marginOccupy',label:'保证金占用',sortable:false,sort:1,hide:false,fixed:false,width:150},
                {prop:'riskExposure',label:'风险度',sortable:false,sort:1,hide:false,fixed:false,width:150},
                {prop:'appendMargin',label:'追加保证金',sortable:false,sort:1,hide:false,fixed:false,width:150},
                {prop:'availableAmount',label:'可用资金',sortable:false,sort:1,hide:false,fixed:false,width:150},
                {prop:'remark',label:'备注/摘要',sortable:false,sort:1,hide:false,fixed:false,width:150},
                {prop:'action',label:'操作',sortable:false,sort:14,hide:false,fixed:'right',width:200},
            ],
            tableHeight:(window.innerHeight - 380) + 'px',
             // 学员列表
             studentList:[],
             // 详情弹窗的开关
             dialogVisible:false,
             // 行数据对象
             rowData:""
        }
    },
    created() {
        // 列按照sort升序
        this.columnList.map((item,index)=>{item.sort = index+1; return item; })
        this.selectByPage()
    },
    computed:{
        ...mapState(['amplify'])
    },
    mounted(){
        this.$nextTick(()=>{
            this.countTableHeight()
            // 获取所有学员信息
            getAll({}).then(res=>{
              if (res.code == 1) {
                  this.studentList = res.data
              }
            })
        })
    },
    methods: {
      detailRow(id){
        console.log("查看详情id:",id);
        this.dialogVisible = true;
        getById({"id":id}).then(res=>{
          if (res.code == 1) {
              this.rowData = res.data
          }
        })
      },
      // 搜索事件
      onSearch() {
          this.queryParams.pageNo = 1
          this.selectByPage()
      },
      // 分页查询事件
      selectByPage() {
          this.tableLoading = true
          selectByPageOrgData(this.queryParams).then((res) => {
              this.tableLoading = false
              if (res.code === 1) {
                  this.tableData = res.data.records
                  this.tableTotal = res.data.total
              }
          }).catch(() => {
              this.tableLoading = false
          })
      },
      // 表格高度
      countTableHeight(){
        let tableHeight = (window.innerHeight - 380) + 'px'
        // 计算搜索区域
        var searchContainerList =  document.getElementsByClassName("searchContainer")
        if (this.arrIsNotEmpty(searchContainerList) && this.arrIsNotEmpty(searchContainerList[0])) {
                  let searchContainerHeight = searchContainerList[0].offsetHeight
                  // header高度+面包屑高度+tab多标签页高度+tab多标签页底部margin的高度
                  let staticHeight = 60+38+30+15
                  if (this.amplify == true) {
                      // 放大后 , 就没有头部, 面包屑, tab多标签页了 , 预留70px给空白 , 并预留50px给分页
                      tableHeight = window.innerHeight - searchContainerHeight - 50 - 70 + 'px'
                  } else {
                      tableHeight = window.innerHeight - (staticHeight + searchContainerHeight) - 50 - 50 + 'px'
                  }
                  this.tableHeight = tableHeight
              }
      },
    },
    watch: {
		amplify(newValue,oldValue) {
			this.countTableHeight()
		},
	},
}
</script>
<style scoped>
[class*=el-col-] {
    box-sizing: border-box;
    /* border: solid 1px red; */
}
.capitalDetailTable,
.inoutCapitalTable {
  width: 98%;
  border-collapse:collapse;
  margin: auto;

}
.capitalDetailTable td {
  width:25%;
  border: solid 1px #b1afaf;
  text-align: left;
  color: black;
}
.inoutCapitalTable td {
  border: solid 1px #b1afaf;
  text-align: center;
  color: black;
}
.priceTD {
  text-align: right !important;
}
td {
  padding-right: 5px;
}
</style>